<template>
  <el-dialog
    title="历史详情"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="60%"
    v-dialog-drag
    :close-on-click-modal="false"
    top="5vh"
    @close="handleClose()"
    @open="handleOpen()"
  >
    <div class="dialog-body-content" :key="updateKey" v-loading="loading">
      <el-collapse
        :value="[
          '1',
          '2',
          '3',
          'members',
          'task',
          'rawMaterial',
          'equipOperationStatus',
          'taskProcessingStatus',
          'abnormalHandlingStatus',
          'stationLog',
        ]"
      >
        <el-collapse-item
          name="2"
          v-if="baseForm.continuousProduce === 'Y' && baseForm.groupName"
        >
          <template slot="title">
            <PartitionTitle title="上一班详情"></PartitionTitle>
          </template>
          <el-form :model="baseForm2" label-width="100px" size="small">
            <el-row>
              <el-col :span="5">
                <el-form-item label="班组" prop="groupName" label-width="60px">
                  <el-input
                    type="text"
                    v-model="baseForm2.groupName"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="班次" prop="classesName">
                  <el-input
                    type="text"
                    v-model="baseForm2.classesName"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="负责人" prop="handoverManagerRealName">
                  <el-input
                    type="text"
                    v-model="baseForm2.handoverManagerRealName"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="交班时间" prop="workEndTime">
                  <el-input
                    type="text"
                    v-model="baseForm2.workEndTime"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-collapse-item>
        <el-collapse-item name="1">
          <template slot="title">
            <PartitionTitle title="班组详情"></PartitionTitle>
          </template>
          <el-form :model="baseForm" label-width="150px" size="small">
            <el-row>
              <el-col :span="8">
                <el-form-item label="负责人" prop="handoverManagerRealName">
                  <el-input
                    type="text"
                    v-model="baseForm.handoverManagerRealName"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="产线" prop="lineName">
                  <el-input
                    type="text"
                    v-model="baseForm.lineName"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="班组" prop="groupName">
                  <el-input
                    type="text"
                    v-model="baseForm.groupName"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="实际工作开始时间"
                  prop="workStartTime"
                  label-width="150px"
                >
                  <el-input
                    type="text"
                    v-model="baseForm.workStartTime"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="下一班是否连续生产"
                  prop="continuousProduce"
                  label-width="150px"
                >
                  <div class="box">
                    <el-select
                      v-model="baseForm.continuousProduce"
                      placeholder="请选择"
                      class="w1"
                      disabled
                      @change="handleChangeContinuousProduce"
                    >
                      <el-option label="是" value="Y"> </el-option>
                      <el-option label="否" value="N"> </el-option>
                    </el-select>
                    <el-select
                      v-if="showNotContinuousReason"
                      v-model="baseForm.notContinuousReason"
                      placeholder="请选择"
                      disabled
                    >
                      <el-option label="换型" :value="1"> </el-option>
                      <el-option label="停机" :value="2"> </el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="计划停机时长(小时)"
                  prop="planDowntimeDur"
                  label-width="150px"
                >
                  <el-input
                    type="text"
                    v-model="baseForm.planDowntimeDur"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="实际工作结束时间"
                  prop="workEndTime"
                  label-width="150px"
                >
                  <el-input
                    type="text"
                    v-model="baseForm.workEndTime"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="接班操作时间"
                  prop="takeoverTime"
                  label-width="150px"
                >
                  <el-input
                    type="text"
                    v-model="baseForm.takeoverTime"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="交班操作时间"
                  prop="handoverTime"
                  label-width="150px"
                >
                  <el-input
                    type="text"
                    v-model="baseForm.handoverTime"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <!-- 原材料信息 -->
          <RawMaterial status="3"></RawMaterial>
          <!-- 人员安排 -->
          <Members status="3" detailKey="handoverDetail"></Members>
          <!-- 设备运行情况 -->
          <EquipOperationStatus></EquipOperationStatus>
          <!-- 任务处理情况 -->
          <TaskProcessingStatus status="3"></TaskProcessingStatus>
          <!-- 异常处理情况 -->
          <AbnormalHandlingStatus status="3"></AbnormalHandlingStatus>
          <!-- 工位交接日志 -->
          <StationLog status="3"></StationLog>
        </el-collapse-item>
        <el-collapse-item
          name="3"
          v-if="baseForm.continuousProduce === 'Y' && baseForm.groupName"
        >
          <template slot="title">
            <PartitionTitle title="下一班详情"></PartitionTitle>
          </template>
          <el-form :model="baseForm3" label-width="100px" size="small">
            <el-row>
              <el-col :span="5">
                <el-form-item label="班组" prop="groupName" label-width="60px">
                  <el-input
                    type="text"
                    v-model="baseForm3.groupName"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="班次" prop="classesName">
                  <el-input
                    type="text"
                    v-model="baseForm3.classesName"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="负责人" prop="takeoverManagerRealName">
                  <el-input
                    type="text"
                    v-model="baseForm3.takeoverManagerRealName"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="接班时间" prop="workStartTime">
                  <el-input
                    type="text"
                    v-model="baseForm3.workStartTime"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="default" @click="dialogVisible = false">取消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import Members from "../components/members";
import RawMaterial from "../components/rawMaterial";
import EquipOperationStatus from "../components/equipOperationStatus";
import TaskProcessingStatus from "../components/taskProcessingStatus";
import AbnormalHandlingStatus from "../components/abnormalHandlingStatus";
import StationLog from "../components/stationLog";
import { getHistoryDetail } from "@/api/shifts/history";
import { mapMutations } from "vuex";
export default {
  components: {
    Members,
    RawMaterial,
    EquipOperationStatus,
    TaskProcessingStatus,
    AbnormalHandlingStatus,
    StationLog,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    group: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      updateKey: 1,
      baseForm: {
        handoverManagerRealName: null,
        lineName: null,
        groupName: null,
        workStartTime: null,
        continuousProduce: null,
        notContinuousReason: null,
        planDowntimeDur: null,
        workEndTime: null,
        takeoverTime: null,
        handoverTime: null,
      },
      showNotContinuousReason: false,
      baseForm2: {
        groupName: null,
        classesName: null,
        handoverManagerRealName: null,
        workEndTime: null,
      },
      baseForm3: {
        groupName: null,
        classesName: null,
        takeoverManagerRealName: null,
        workStartTime: null,
      },
      loading: false,
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val);
      },
      get() {
        return this.visible;
      },
    },
  },
  methods: {
    ...mapMutations("turnOnDuty", ["SET_HANDOVERDETAIL"]),
    handleClose() {
      this.SET_HANDOVERDETAIL(null);
    },
    handleOpen() {
      this.getDetails();
    },
    getDetails() {
      if (!this.group?.id) {
        return;
      }
      this.loading = true;
      getHistoryDetail(this.group.id)
        .then((res) => {
          this.SET_HANDOVERDETAIL(res?.data || null);
          const {
            handoverManagerRealName,
            lineName,
            groupName,
            workStartTime,
            continuousProduce,
            notContinuousReason,
            planDowntimeDur,
            workEndTime,
            takeoverTime,
            handoverTime,
            preTakeAndHandVo,
            nextProduceLog,
          } = res.data;
          this.baseForm = {
            handoverManagerRealName,
            lineName,
            groupName,
            workStartTime,
            continuousProduce:
              continuousProduce || this.baseForm.continuousProduce,
            notContinuousReason,
            planDowntimeDur,
            workEndTime: workEndTime || this.baseForm.workEndTime,
            takeoverTime,
            handoverTime,
          };
          this.baseForm2 = {
            groupName: preTakeAndHandVo?.groupName || null,
            classesName: preTakeAndHandVo?.classesName || null,
            handoverManagerRealName:
              preTakeAndHandVo?.handoverManagerRealName || null,
            workEndTime: preTakeAndHandVo?.workEndTime || null,
          };
          this.baseForm3 = {
            groupName: nextProduceLog?.groupName || null,
            classesName: nextProduceLog?.classesName || null,
            takeoverManagerRealName:
              nextProduceLog?.takeoverManagerRealName || null,
            workStartTime: nextProduceLog?.workStartTime || null,
          };
          this.updateKey++;
          this.loading = false;
        })
        .catch(() => {
          this.SET_HANDOVERDETAIL(null);
          this.baseForm = {
            handoverManagerRealName: null,
            lineName: null,
            groupName: null,
            workStartTime: null,
            continuousProduce: null,
            notContinuousReason: null,
            planDowntimeDur: null,
            workEndTime: null,
            takeoverTime: null,
            handoverTime: null,
          };
          this.baseForm2 = {
            groupName: null,
            classesName: null,
            handoverManagerRealName: null,
            workEndTime: null,
          };
          this.baseForm3 = {
            groupName: null,
            classesName: null,
            takeoverManagerRealName: null,
            workStartTime: null,
          };
          this.loading = false;
        });
    },
    handleChangeContinuousProduce(value) {
      if (value == "Y") {
        this.baseForm.notContinuousReason = null;
        this.showNotContinuousReason = false;
      } else {
        this.showNotContinuousReason = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-collapse {
  border: none;
  .el-collapse-item__wrap {
    border: none;
  }
}
.block-title {
  margin-bottom: 0;
}

.box {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
</style>
